<template>
  <div class="cash">
      <x-header :left-options="{showBack: true, backText:'余额'}"><router-link  to="/dist/Cashlist" slot="right"><!-- 余额明细 --></router-link></x-header>
      <div class="more-logo"><img src="/dist/static/img/cash.png" alt=""></div>
      <p class="cash">￥{{balance*100/10000}}</p>
      
      <div class="cash-app" @click="app">提现</div>

      <div class="layer" v-show="layshow">{{laymsg}}</div>

  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  },
  data:function(){
    return {
      balance:null, 
      layshow:false,
      laymsg:'',
    }
  },
  methods:{
   layer(bool,msg){
      var _this = this;
      this.layshow = bool;
      this.laymsg = msg;
      setTimeout(function(){
        _this.layshow = false;
      },1000)
   },
   app() {
      if(this.balance>1){
        let cashDraw = this.balance;
        this.$http.post('/api/withdraw',{'amount':cashDraw,'type':'wxpay'}).then(function(res){
          this.layer(true,'提现成功');
          this.balance = 0;
        }).catch(function(){
          this.layer(true,'提现失败');
        });
      }else{
        this.layer(true,'最低提现金额为1元');
      }
    }
  },
  created(){
    
  },
  mounted(){
    let openid = JSON.parse(localStorage.getItem('openid'));
    this.$http.get('/api/wx/user',{params:{'openid':openid}}).then(function(res){
      let data = res.body.data;
      this.balance  = data.balance;
    });
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.cash{
  background-color:#f6f5f5;
}
.more-logo{
  height:10.4rem;
  width:10.4rem;
  margin-top:7rem;
  margin-left:50%;
  transform:translateX(-5.2rem);
}
.more-logo img{
  width:100%;
  height:auto;
}
.cash{
  text-align:center;
  font-size:20px;
  color:#3f3f3f;
}
.cash-app{
  background-color:#1592e2;
  width:50%;
  height:4.5rem;
  border-radius:12px;
  font-size:24px;
  color:#fff;
  line-height:4.5rem;
  text-align:center;
  margin-left:25%;
  margin-top:4.5rem;
  box-shadow:0px 4px 8px 0px rgba(0,0,0,0.26)
}

</style>